<template>
  <div class="container">
    <div class="info-title">排盘结果</div>
    <div class="info-box">
      <div class="info-item">
        <div class="info-item-title">排盘时间：</div>
        <div class="info-item-res">{{this.$route.query.solartime}}</div>
      </div>
      <div class="info-item">
        <div class="info-item-title">占问事项：</div>
        <div class="info-item-res">{{question}}</div>
      </div>
    </div>
    <div class="result-box">
      <div class="lunar-date">
        <span :style="wuXingColor(year[0])">{{year[0]}}</span><span :style="wuXingColor(year[1])">{{year[1]}}</span>年
        <span :style="wuXingColor(month[0])">{{month[0]}}</span><span :style="wuXingColor(month[1])">{{month[1]}}</span>月
        <span :style="wuXingColor(day[0])">{{day[0]}}</span><span :style="wuXingColor(day[1])">{{day[1]}}</span>日
        <span :style="wuXingColor(hour[0])">{{hour[0]}}</span><span :style="wuXingColor(hour[1])">{{hour[1]}}</span>时
      </div>
      <div class="rkw">日空：{{rkw}}</div>
      <div class="gua-name-box">
        <div class="col ben-gua">
          <div>{{benGuaName}}</div>
          <div>{{benGong[0]}}·{{benGong[1]}}<span v-if="benGong[2]">({{benGong[2]}})</span></div>
        </div>
        <div class="col bian-gua">
          <div>{{bianGuaName}}</div>
          <div>{{bianGong[0]}}·{{bianGong[1]}}<span v-if="bianGong[2]">({{bianGong[2]}})</span></div>
        </div>
      </div>
      <div class="gua-table">
        <div class="col liuShen">
          <div v-for="(item, index) in liuShen" :key="index" class="item">{{item}}</div>
        </div>
        <div class="col liuQin">
          <div v-for="(item, index) in liuQin" :key="index" class="item">{{item}}</div>
        </div>
        <div class="col fuShen">
          <div v-for="(item, index) in fuShen" :key="index" class="item">
            <span :style="wuXingColor(item[0])">{{item[0]}}</span><span :style="wuXingColor(item[1])">{{item[1]}}</span>
          </div>
        </div>
        <div class="col benLiuQin">
          <div v-for="(item, index) in benLiuQin" :key="index" class="item">{{item}}</div>
        </div>
        <div class="col benGuaGz">
          <div v-for="(item, index) in benGuaGz" :key="index" class="item">
            <span :style="wuXingColor(item[0])">{{item[0]}}</span><span :style="wuXingColor(item[1])">{{item[1]}}</span>
          </div>
        </div>
<!--        <div class="col benGuaWx">
          <div v-for="(item, index) in benGuaWx" :key="index" class="item">{{item}}</div>
        </div> -->
        <div class="col benGua">
          <div v-for="(item, index) in benGuaYao" :key="index" class="item">
            <image class="gua-img" :src="'../../../static/images/liuyao/result/'+ yinYangName(item)" />
          </div>
        </div>
        <div class="col bianguaPos">
          <div v-for="(item, index) in bianGuaPos" :key="index" class="item">
            <div v-if="item != ''">
              <image class="gua-pos-img" :src="'../../../static/images/liuyao/result/'+ bianguaPosName(item)" />
            </div>
          </div>
        </div>
        <div class="col shiyingYao">
          <div v-for="(item, index) in shiyingYao" :key="index" class="item">{{item}}</div>
        </div>
        <div class="col bianLiuQin">
          <div v-for="(item, index) in bianLiuQin" :key="index" class="item">{{item}}</div>
        </div>
        <div class="col bianGuaGz">
          <div v-for="(item, index) in bianGuaGz" :key="index" class="item">
            <span :style="wuXingColor(item[0])">{{item[0]}}</span><span :style="wuXingColor(item[1])">{{item[1]}}</span>
          </div>
        </div>
<!--        <div class="col bianGuaWx">
          <div v-for="(item, index) in bianGuaWx" :key="index" class="item">{{item}}</div>
        </div> -->
        <div class="col bianGua">
          <div v-for="(item, index) in bianGuaYao" :key="index" class="item">
            <image class="gua-img" :src="'../../../static/images/liuyao/result/'+ yinYangName(item)" />
          </div>
        </div>
      </div>
      <div class="btn-box">
        <div class="re-btn" @click="back">重新起卦</div>
      </div>
      <activity-box :positionId="203"></activity-box>
    </div>
  </div>
</template>

<script>
import { getLiuyaoResultApi, getGuayaoResultApi } from '@/http/api'
export default {
  name: 'liuyaoResult',
  data () {
    return {
      lunarDate: '',
      year: '',
      month: '',
      day: '',
      hour: '',
      question: '',
      rkw: '',
      benGuaName: '',
      bianGuaName: '',
      benGong: [],
      bianGong: [],
      bianGuaPos: [],
      liuShen: [],
      fuShen: [],
      liuQin: [],
      mainLiuQin: [],
      benLiuQin: [],
      bianLiuQin: [],
      benGuaWx: [],
      benGuaGz: [],
      bianGuaWx: [],
      bianGuaGz: [],
      shiyingYao: ['', '', '', '', ''],
      benGuaYao: [],
      bianGuaYao: [],
      // 五行对应颜色图标
      fiveElementList: {
        '甲': {
            color: '#59e54e',
            img: 'wood.png'
        },
        '乙': {
            color: '#59e54e',
            img: 'wood.png'
        },
        '丙': {
            color: '#cb270b',
            img: 'fire.png'
        },
        '丁': {
            color: '#cb270b',
            img: 'fire.png'
        },
        '戊': {
            color: '#707070',
            img: 'earth.png'
        },
        '己': {
            color: '#707070',
            img: 'earth.png'
        },
        '庚': {
            color: '#fcaf00',
            img: 'metal.png'
        },
        '辛': {
            color: '#fcaf00',
            img: 'metal.png'
        },
        '壬': {
            color: '#407ef7',
            img: 'water.png'
        },
        '癸': {
            color: '#407ef7',
            img: 'water.png'
        },
        '子': {
            color: '#407ef7',
            img: 'water.png'
        },
        '亥': {
            color: '#407ef7',
            img: 'water.png'
        },
        '寅': {
            color: '#59e54e',
            img: 'wood.png'
        },
        '卯': {
            color: '#59e54e',
            img: 'wood.png'
        },
        '巳': {
            color: '#cb270b',
            img: 'fire.png'
        },
        '午': {
            color: '#cb270b',
            img: 'fire.png'
        },
        '申': {
            color: '#fcaf00',
            img: 'metal.png'
        },
        '酉': {
            color: '#fcaf00',
            img: 'metal.png'
        },
        '辰': {
            color: '#707070',
            img: 'earth.png'
        },
        '戌': {
            color: '#707070',
            img: 'earth.png'
        },
        '丑': {
            color: '#707070',
            img: 'earth.png'
        },
        '未': {
            color: '#707070',
            img: 'earth.png'
        }
      }
    }
  },
  mounted(a) {
    uni.showLoading({
    		mask: true,
    		title: '加载中',
    });
    let query = this.$route.query;
    if (query.guaType && query.bengua && query.biangua) {
      getGuayaoResultApi({
        BenGuaName: this.$route.query.bengua,
        BianGuaName: this.$route.query.biangua,
        question: this.$route.query.issue,
        stringDate: this.$route.query.solartime
      }).then(res => {
        if (res.code == 200) {
          this.resultShow(res.data);
        }
      })
    }else if (query.solartime && query.gua) {
      let arr = query.gua.split('').reverse();
      getLiuyaoResultApi({
        a: arr[0],
        b: arr[1],
        c: arr[2],
        d: arr[3],
        e: arr[4],
        f: arr[5],
        question: this.$route.query.issue,
        stringDate: this.$route.query.solartime
      }).then(res => {
        if (res.code == 200) {
          this.resultShow(res.data);
        }
      })
    }
  },
  methods: {
    // 结果展示
    resultShow(data) {
      // 农历
      this.lunarDate = data.lunarDate;
      // 农历日期分割
      this.year = data.lunarDate.split("年")[0];
      this.month = data.lunarDate.split("年")[1].split("月")[0];
      this.day = data.lunarDate.split("年")[1].split("月")[1].split("日")[0];
      this.hour = data.lunarDate.split("年")[1].split("月")[1].split("日")[1].split("时")[0];
      this.question = data.question;
      // 日空亡
      this.rkw = data.rkw;
      // 本卦名称
      this.benGuaName = data.benGuaName;
      // 变卦名称
      this.bianGuaName = data.bianGuaName;
      // 本卦爻
      this.benGuaYao = data.benGuaYao;
      // 变卦爻
      this.bianGuaYao = data.bianGuaYao;
      // 变卦位置
      this.getBianGuaPos(this.benGuaYao, this.bianGuaYao);
      // 本宫
      this.benGong = data.benGong;
      // 变宫
      this.bianGong = data.bianGong;
      // 六神
      this.liuShen = data.liuShen;
      // 六亲
      this.mainLiuQin = data.mainLiuQin;
      // 本卦六亲
      this.benLiuQin = data.benLiuQin;
      // 变卦六亲
      this.bianLiuQin = data.bianLiuQin;
      // 显示六亲伏神
      this.getLiuQinFuShen(this.mainLiuQin, this.benLiuQin, data.mainGuaGz);
      // 本卦五行 干支
      this.benGuaWx = data.benGuaWx;
      this.benGuaGz = data.benGuaGz;
      // 变卦五行 干支
      this.bianGuaWx = data.bianGuaWx;
      this.bianGuaGz = data.bianGuaGz;
      // 世爻,应爻
      this.shiyingYao[data.benShiYao] = '世'
      this.shiyingYao[data.benYingYao] = '应'
      uni.hideLoading()
    },
    // 获取六亲
    getLiuQinFuShen(main, ben, gz) {
      let temp1 = [];
      let temp2 = [];
      for (let [index, ele] of main.entries()) {
        if (ben.includes(ele)) {
          temp1.push('');
          temp2.push('');
        } else {
          temp1.push(ele)
          temp2.push(gz[index]);
        }
      }
      this.liuQin = temp1;
      this.fuShen = temp2;
    },
    // 获取变卦位置
    getBianGuaPos(ben, bian) {
      let temp = [];
      for (let i=0; i<6; i++) {
        if (ben[i] == bian[i]) {
          temp.push('');
        }else {
          if (ben[i] == '阳') {
            // 阳变阴
            temp.push('0');
          }
          if (ben[i] == '阴') {
            // 阴变阳
            temp.push('1');
          }
        }
      }
      this.bianGuaPos = temp;
    },
    liuShenName(item) {
      if (item == '朱雀') return '雀'
      if (item == '青龙') return '龙'
      if (item == '白虎') return '虎'
      if (item == '玄武') return '玄'
      if (item == '腾蛇') return '蛇'
      if (item == '勾陈') return '勾'
    },
    liluQinName(item) {
      if (item == '父母') return '父'
      if (item == '兄弟') return '兄'
      if (item == '子孙') return '孙'
      if (item == '官鬼') return '官'
      if (item == '妻财') return '财'
    },
    yinYangName(item) {
      if (item == '阳') return 'yang.png'
      if (item == '阴') return 'yin.png'
    },
    bianguaPosName(item) {
      if (item == '0') return 'o.png'
      if (item == '1') return 'x.png'
    },
    // 对应五行信息
    wuXingColor(type) {
      if (this.fiveElementList[type]) {
        let { color } = this.fiveElementList[type];
        return `color: ${color}`
      }
      return ''
    },
    back() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36rpx;
  font-size: 30rpx;
}
.info-title {
  font-size: 36rpx;
  color: #9f8465;
  padding-bottom: 16rpx;
  font-weight: bold;
}
.info-box {
  width: 640rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  
  box-shadow: 0 0 10rpx #666;
  padding: 50rpx 50rpx;
  margin-bottom: 36rpx;
  .info-item {
    display: flex;
    flex-direction: row;
    .info-item-title {
      width: 140rpx;
      white-space: nowrap;
    }
    .inof-item-res {
      
    }
  }
}
.result-box {
  width: 100%;
  max-width: 375px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 30rpx;
  font-weight: bold;
  .lunar-date {
    font-size: 40rpx;
    color: #000;
    white-space: nowrap;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  .rkw {
    font-size: 32rpx;
    color: #32312e;
    margin-bottom: 10rpx;
  }
  .gua-name-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    font-size: 32rpx;
    color: #9f8465;
    .ben-gua, .bian-gua {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 10rpx;
    }
    .ben-gua {
      margin-right: 130rpx;
    }
  }
  .gua-table {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 37rpx;
    .col {
      // border-radius: 4rpx;
      // border: solid 2rpx #a9a9a9;
      padding: 0 4rpx;
      min-width: 24rpx;
    }
    .item {
      // width: 80rpx;
      height: 50rpx;
      white-space: nowrap
    }
    .gua-img {
      width: 72rpx;
      height: 24rpx;
    }
    .gua-pos-img {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
.btn-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  .re-btn {
  	width: 561rpx;
  	height: 80rpx;
    background: url('@/static/images/liuyao/result/btn.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>